{extend name="layout/layout" /}

{if condition="session('source')"}
	{block name="header"}{/block}
{/if}

{block name="style"}
	<link rel="stylesheet" href="/assets/js/Huploadify/Huploadify.css">
	<style>
		.comment{
			padding-bottom: 60px;
		}
		.bus-info{
			padding: 10px;
			background: #fff;
		}

		.item{
			background: #fff;
			margin-bottom: 8px;
		}

		.item .goods-name{
			padding: 5px 10px;
		}

		.bus-name{
			line-height: 24px;
		}

		.bus-icon .iconfont{
			font-size: 24px;
			color: #8f8f94;
		}

		.score{
			padding: 5px 10px;
		}

		.content{
			padding: 5px 10px;
		}

		.content textarea{
			border:none;
			font-size: 12px;
			padding: 0;
			margin: 0;
		}

		.icon-xingxing{
			margin-left: 5px;
			font-size: 20px;
		}

		.submit-btn{
			height: 45px;
			line-height: 45px;
			position: fixed;
			bottom: 0;
			left: 0;
			width:100%;
			background: #e60012;
			color:#ffff;
			text-align: center;
		}
	</style>
{/block}

{block name="main"}
	<div class="comment" v-cloak>
		<div class="mui-row mui-text-center img-list mui-hidden">
			<div class="mui-col-xs-4" v-for="img in imgSrc">
				<img :src="img" alt="">
			</div>

			<div class="mui-col-xs-4">
				<div id="up"></div>
			</div>
		</div>

		<form action="{:url('/api/order/comment')}" class="comment-form">
			<div class="goods-list">
				<div class="item" v-for="goods, index in detail.goods">
					<div class="goods-info mui-row">
						<div class="goods-img mui-col-xs-2">
							<img :src="goods.original_image" class="img-responsive" alt="">
						</div>
						<p class="goods-name mui-col-xs-10">{{goods.goods_name}}</p>
					</div>

					<div class="score">
						描述相符： 
						<i class="mui-icon iconfont icon-xingxing" :class="sindex<goods.score?'text-theme':'text-gray'" @tap="changeScore(goods, sindex)" v-for="s, sindex in 5"></i>
					</div>

					<div class="content">
						<textarea name="" id="" cols="5" rows="3" :name="'goods['+goods.goods_id+'][content]'" v-model="goods.content" placeholder="分享你的购买心得"></textarea>
					</div>

					<div class="upload-img mui-row">
						<div class="mui-col-xs-2" v-for="img in goods.img">
							<img :src="img" class="img-responsive" alt="">
						</div>
						<div class="mui-col-xs-2">
							<img src="/assets/mobile/images/upload_icon.png" @tap="uploadImg(index)" class="img-responsive" alt="">
						</div>
					</div>

					<input type="hidden" :name="'goods['+goods.goods_id+'][score]'" v-model="goods.score">
					<input type="hidden" :name="'goods['+goods.goods_id+'][content]'" v-model="goods.content">
					<input type="hidden" :name="'goods['+goods.goods_id+'][img]'" :value="goods.img.toString()">
				</div>
			</div>

			<div class="bus-info">
				<div class="bus-title mui-row">
					<div class="bus-icon mui-col-xs-1">
						<i class="mui-icon iconfont icon-shangjia"></i>
					</div>
					<div class="bus-name mui-col-xs-11">{{detail.business_name}}</div>
				</div>
				<div class="service-score">
					服务态度：
					<i class="mui-icon iconfont icon-xingxing" :class="sindex<service_score?'text-theme':'text-gray'" @tap="service_score = sindex+1" v-for="s, sindex in 5"></i>
				</div>
				<div class="shipping-score">
					发货速度：
					<i class="mui-icon iconfont icon-xingxing" :class="sindex<shipping_score?'text-theme':'text-gray'" @tap="shipping_score = sindex+1" v-for="s, sindex in 5"></i>
				</div>
			</div>

			<input type="hidden" name="service_score" v-model="service_score">
			<input type="hidden" name="shipping_score" v-model="shipping_score">
		</form>

		<div class="submit-btn" @tap="submitComment()">提交评价</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script src="/assets/js/Huploadify/jquery.Huploadify.js"></script>
	<script>
		var detailVue = new Vue({
			el: '.comment',
			data: {
				order_id : "{$data.order_id?:''}",
				token: "{$data.token?:''}",
				detail:[],
				service_score:'',
				shipping_score:'',
				imgSrc: [],
				img_index: '',
			},
			mounted: function(){
				this.getDetail();
			},
			methods:{
				//获取订单详情
                getDetail: function(){
					layer.open({
						type:2,
						shadeClose: false
					});

					var that = this;
					var url =  'order/detail';
					request(that, {'url': url, 'data': {
					  	"order_id": that.order_id,
					}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							res.data.goods.forEach(function(item){
								item.score = '';
								item.content = '';
								item.img = []
							})
							that.detail = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//改变商品评分
				changeScore: function (goods, index){
					goods.score = index+1;
				},
				//提交评价
				submitComment: function(){
					var formData = $('.comment-form').serialize();
					var that = this;
					formData+='&token='+token+'&order_id='+this.order_id;
					formData += '&merid='+merid+'&mobileType=h5';
			

					$.ajax({
						url: apiUrl+'order/comment',
						type: 'post',
						dataType: 'json',
						data: formData,
						beforeSend:function(){
							layer.open({
								type:2,
								shadeClose: false,
							});
						},
						success: function(res){
							layer.closeAll();
							mui.toast(res.msg);
							if(res.code == 200){
								mui.back();
							}
						}
					})
					.fail(function(res) {
						console.log(res);
						layer.closeAll();
						mui.toast(res.responseJSON.msg);
					});
					
				},
				//上传图片
				uploadImg: function(index) {
					this.img_index = index;
					console.log(index);
					var imgs = this.detail.goods[index]['img'];
					if(imgs.length >= 3) {
					    mui.alert('最多上传3张');
					    return;
					}
					document.getElementById('file_upload_1-button').click();
				}	
			}

		});

			//上传图片
    $('#up').Huploadify({
        auto:true,
        fileTypeExts:'*.jpg;*.png;*.jpeg;*.JPG;*.JPEG;*.PNG',
        multi:true,//能多图片上传
        formData:{ 'dirname':'applyInsure', 'name' : 'file'},
        fileSizeLimit:10240,//限制10M
        fileObjName : 'file',
        method:'post',
        buttonText :'<div class="upload-div"><img src="/assets/img/upload_img.png" class="upload-img" alt=""><p>上传图片</p></div>',
        showUploadedPercent:true,//是否实时显示上传的百分比，如20%
        showUploadedSize:true,
        removeTimeout:3,//进度条消失时间
        uploader:"{:url('api/ajax/upload')}",
        onUploadStart:function(){
            //alert('开始上传');

        },
        onInit:function(){
            //alert('初始化');
        },
        //上传成功
        onUploadSuccess: function(file, data, response) {
            var res = JSON.parse(data);

            if(res.code == 200){
                var index = detailVue.img_index;
            	detailVue.detail['goods'][index]['img'].push(res.data.url);
            }else{
            	mui.alert(res.msg);
            }
        },
        //删除图片
        onDelete:function(file){
            console.log('删除的文件：'+file);
            console.log(file);
        }
    });
	</script>
{/block}